<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        /* header */
        header,
        footer {
            background: #58ccf2;
        }

        header {
            text-align: center;
            border-bottom: 1px solid #4aaecf;
            box-shadow: 0 1px 10px 0px #b1b1b1;
        }

        header img {
            height: 105px;
            margin: 31px 0 25px 0;
        }

        main {
            display: flex;
        }

        button:hover {
            background: #4aaecf;
        }

        /* 商品列表 */
        #product-list {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
        }

        #product-list li {
            width: 25%;
            text-align: center;
            margin-bottom: 50px;
        }

        #product-list li img {
            height: 150px;
            margin-bottom: 50px;
            margin-top: 60px;
        }

        #product-list li h4 {
            font-size: 25px;
            color: #3a3a3a;
            margin-bottom: 20px;
        }

        #product-list li h5 {
            font-size: 18px;
            color: #777;
            /* margin-bottom: 10px; */
        }

        #product-list li h6 {
            font-size: 16px;
            color: #3a3a3a;
            margin-bottom: 10px;
        }

        #product-list li button {
            width: 190px;
            height: 40px;
            border-radius: 5px;
            background: #58ccf2;
            color: #fff;
            font-weight: 600;
            border: none;
            cursor: pointer;
        }

        #product-list li button:hover {
            background: #4aaecf;
        }


        /* 购物车 */
        aside {
            text-align: center;
            width: 436px;
            /* border-left: 1px solid #b3b3b3; */
            box-shadow: -1px 0 8px 0 #e9e9e9;
        }

        h2 img {
            height: 38px;
            margin-top: 49px;
            margin-bottom: 50px;
        }

        #cart-list {
            margin: 0 25px;
            border-bottom: 2px dashed #333;
        }

        #cart-list li {
            display: flex;
            align-items: center;
            text-align: left;
            color: #3a3a3a;
            margin-bottom: 20px;
        }

        #cart-list li.head {
            color: #777;
            padding-bottom: 8px;
            border-bottom: 2px dashed #333;
            margin-bottom: 10px;
        }

        #cart-list li h5 {
            font-size: 21px;
            margin-bottom: 3px;
        }

        #cart-list li h6 {
            font-size: 14px;
        }

        #cart-list li .item {
            flex: 2;

        }

        #cart-list li:not(.head) .item {
            display: flex;
            line-height: 50px;
        }

        #cart-list li .img-box {
            width: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
        }

        #cart-list li .item img {
            height: 50px;
            margin-right: 10px;
        }

        #cart-list li .price {
            flex: 1;
        }


        #cart-list li .quantity {
            flex: 1;
        }

        #cart-list li .quantity input {
            width: 45px;
            height: 30px;
            border-radius: 5px;
            border: 1px solid #58ccf2;
            background: #eee;
            text-indent: 10px;
        }

        #cart-list li .delete {
            flex: 1;
        }

        #cart-list li .delete button {
            height: 32px;
            width: 25px;
            text-align: center;
            color: #fff;
            background: #ec5757;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .total {
            text-align: right;
            margin-top: 10px;
        }

        .total .title {
            margin-right: 20px;
            font-weight: 600;
        }

        .total .price {
            margin-right: 60px;
        }

        .pay {
            width: 90%;
            height: 60px;
            border-radius: 8px;
            background: #58ccf2;
            color: #fff;
            font-weight: 600;
            border: none;
            cursor: pointer;
            font-size: 25px;
            margin-top: 40px;
        }

        /* footer */

        footer img {
            height: 50px;
            margin: 20px auto 20px 200px;
        }
    </style>
</head>

<body>
    <header><img src="./imgs/shooping-cart.png" alt=""></header>
    <main>
        <ul id="product-list">
            <!-- <li>
                <img src="./imgs/apple.png" alt="">
                <h4>苹果</h4>
                <h5>Apple</h5>
                <h6>¥2.99</h6>
                <button>加入购物车</button>
            </li> -->
        </ul>
        <aside>
            <h2><img src="./imgs/cart.png" alt=""></h2>
            <ul id="cart-list">
                <li class="head">
                    <div class="item">
                        <h5>商品</h5>
                        <h6>Item</h6>
                    </div>
                    <div class="price">
                        <h5>价格</h5>
                        <h6>Price</h6>
                    </div>
                    <div class="quantity">
                        <h5>数量</h5>
                        <h6>Quantity</h6>
                    </div>
                    <div class="delete"></div>
                </li>
            </ul>
            <div class="total">
                <span class="title">Total</span>
                <span class="price">$0</span></div>
            <button class="pay">购买</button>
        </aside>
    </main>
    <footer><img src="./imgs/thanks.png" alt=""></footer>
    <script src="../cookie.js"></script>
    <!-- <script src="./script1.js"></script> -->
    <script src="./script2.js"></script>
</body>

</html>